<template>
	<view>
		<view class="main">
			<view class="main-top">
				<view class="balance">
					<view class="top">
						<view class="left">
							<view class="title">
								<text>账户余额(元)</text>
								<u-icon v-if="!lookState" name="eye-off" color="#F7F7F7" size="28"
									@click="look"></u-icon>
								<u-icon v-else name="eye-fill" color="#F7F7F7" size="28" @click="look"></u-icon>
							</view>
							<view class="number">
								<text>{{balance}}</text>
							</view>
						</view>
						<view class="right">
							<view class="cash" @click="cashClick">
								<text>提现</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="left">
							<view class="title">
								<text>总收入金额(元)</text>
							</view>
							<view class="number">
								<text>{{balanceData.norecorded_money}}</text>
							</view>
						</view>
						<view class="right">
							<view class="title">
								<text>已提现金额(元)</text>
							</view>
							<view class="number">
								<text>{{balanceData.withdrawal_money}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cash-tag">
					<view class="cash-tag-item border-left">
						<view class="cash-tag-item-con" @click="billDetail">
							<u-icon name="order" color="#6574bc" size="24"></u-icon>
							<text>入账明细</text>
						</view>
					</view>
					<view class="cash-tag-item">
						<view class="cash-tag-item-con" @click="cashLog">
							<u-icon name="red-packet" color="#6574bc" size="24"></u-icon>
							<text>提现记录</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bill">
				<view v-for="(item, index) in balanceData.balanceTotal" :key="index" class="item"
					@click="clickTotal(item)">
					<view class="left">
						<u--image :src="'/static/balance'+item.number+'.png'" width="50" height="50"
							shape="square"></u--image>
					</view>
					<view class="right">
						<view class="top">
							<view class="title">
								<text>{{item.title}}</text>
							</view>
							<view class="arrows">
								<u-icon name="arrow-right" color="#6574bc" size="16"></u-icon>
							</view>
						</view>
						<view class="bottom">
							<view class="one">
								<text>已到账</text>
								<text class="money">{{item.recorded_money}}</text>
							</view>
							<view class="two">
								<text>未到账</text>
								<text class="money">{{item.norecorded_money}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lookState: true,
				balance: '******',
				balance_show: '1860.00',
				balance_hide: '******',
				balanceData: {}
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			// 查看余额
			look() {
				if (this.lookState) {
					this.balance = this.balance_hide
					this.lookState = false
				} else {
					this.balance = this.balance_show
					this.lookState = true
				}
			},
			// 加载数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getUserBalance',
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.balanceData = res.data
					this.balance_show = res.data.balance
					this.balance = res.data.balance
				}
			},
			// 提现
			cashClick() {
				uni.navigateTo({
					url: '/pages/hzy/cash/cash'
				})
			},
			// 入账明细
			billDetail() {
				uni.navigateTo({
					url: '/pages/hzy/cash/billDetail'
				})
			},
			// 提现记录
			cashLog() {
				uni.navigateTo({
					url: '/pages/hzy/cash/detail'
				})
			},
			// 余额类型详情
			clickTotal(item) {
				uni.navigateTo({
					url: '/pages/hzy/cash/total/month?type=' + item.number
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 30rpx;

		.main-top {
			background-color: #eef0ff;
			border-radius: 30rpx;
			box-shadow: 0px 5px 20px -10px #342f2f;
			height: 480rpx;

			.balance {
				height: 350rpx;
				background: linear-gradient(to right, #658afb, #4864f5);
				border-radius: 30rpx;
				padding: 30rpx 50rpx 0 50rpx;
				box-shadow: 0px 5px 20px -10px #342f2f;
				color: #F7F7F7;

				.top {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 60rpx;
					border-bottom: 1px solid #779aff;

					.left {
						.title {
							display: flex;

							text {
								margin-right: 20rpx;
							}
						}

						.number {
							font-size: 40rpx;
							font-weight: bold;
							color: #ffffff;
						}
					}

					.right {
						.cash {
							font-size: 34rpx;
							padding: 10rpx 40rpx;
							background: linear-gradient(to right, #9cb4ff, #7c93fe);
							border-radius: 38rpx;
							color: #ffffff;
						}
					}
				}

				.bottom {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.number {
						padding-top: 10rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #ffffff;
					}
				}
			}

			.cash-tag {
				display: flex;
				justify-content: space-between;
				padding-top: 24rpx;
				color: #6574bc;

				.cash-tag-item {
					width: 50%;
					display: flex;
					justify-content: center;

					.cash-tag-item-con {
						display: flex;
						align-items: center;
					}
				}

				.border-left {
					border-right: 1px solid #d1d5e3;
				}
			}
		}

		.bill {
			margin-top: 50rpx;

			.item {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background-color: #ffffff;
				box-shadow: 0px 5px 20px -10px #342f2f;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 18%;
				}

				.right {
					width: 82%;

					.top {
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #EBEEF5;
						padding-bottom: 20rpx;
						font-weight: bold;
						font-size: 34rpx;
						align-items: center;
					}

					.bottom {
						padding-top: 20rpx;
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;

						.one {
							color: #19be6b;
						}

						.two {
							color: #fa3534;
						}

						.money {
							padding-left: 10rpx;
						}
					}
				}
			}

			.item:nth-child(1) {
				border-left: 5px solid #2979ff;
			}

			.item:nth-child(2) {
				border-left: 5px solid #fa3534;
			}

			.item:nth-child(3) {
				border-left: 5px solid #ff9900;
			}

			.item:nth-child(4) {
				border-left: 5px solid #19be6b;
			}

			.item:nth-child(5) {
				border-left: 5px solid #A600A9;
			}
		}
	}
</style>